<!-- DOCTYPE html-->
<html>
    <title>Untitled Document</title>
    <style type="text/css">
        body {
            font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
            background:hsl(0, 0%, 84%);
            margin: 0;
            padding: 0;
            color: #000;
        }

        .sidebar1{
            width: 450px;
            display: inline-block;
        }

        .content{
            width: 850px;
            display: inline-block;
        }
		
		#canvas1{
			position: absolute;
			top: 0px;
		}

        /* ~~ Element/tag selectors ~~ */

    </style>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" src="pixastic.custom.js"></script>


</head>

<body onload="draw();">

    <div class="container">
        <div class="sidebar1">
            <img id="red" src="isim_red.png" alt="red"/>
            <img id="green" src="isim_green.png" alt="green"/>
            <img id="blue" src="isim_blue.png" alt="blue"/>
			<img id="redb" src="isim_redb.png" alt="red"/>
            <img id="greenb" src="isim_greenb.png" alt="green"/>
            <img id="blueb" src="isim_blueb.png" alt="blue"/>
        </div>
        <div class="content">
            <canvas id="canvas1" width="900" height="600"></canvas>
        </div>
    </div>

    <script type="text/javascript">
        var mode = 'lighter';
        var canvas = document.getElementById("canvas1");
        var ctx = document.getElementById("canvas1").getContext('2d');
        var red = document.getElementById("red");
        var green = document.getElementById("green");
        var blue = document.getElementById("blue");
		var redb = document.getElementById("redb");
        var greenb = document.getElementById("greenb");
        var blueb = document.getElementById("blueb");
		
		
        
        function draw(){
           
            //            var blue = document.getElementById("blue");
            //            
            //canvas.addEventListener("mousemove",mouseXY, false);
            ctx.drawImage(red, 0, 0);
            ctx.globalCompositeOperation = mode;
            ctx.drawImage(green, 2, 0);
            ctx.drawImage(blue, -2, 1);
            //            ctx.drawImage(blue, 3, 0);
            //            ctx.fillStyle = "#f00";
            //            ctx.fillRect(100,100,100,100);
            //            
            //            ctx.fillStyle = "#0f0";
            //            ctx.fillRect(150,150,100,100);
            //            
            //            ctx.globalCompositeOperation = mode;
            timer = setInterval(function(){
                changePos();
            }, 20)
            var pos1 = [0,0];
            var pos2 = [0,0];
            var pos3 = [0,0];
			var v1=0, v2=0, v3=0;
            function changePos(){
				var tempP2 = [pos2[0], pos2[1]];
				var tempP3 = [pos3[0], pos3[1]];
                pos2[0] += (pos1[0]-pos2[0])*0.6;
                pos2[1] += (pos1[1]-pos2[1])*0.6;
                pos3[0] += (pos2[0]-pos3[0])*0.6;
                pos3[1] += (pos2[1]-pos3[1])*0.6;
				v2 = Math.sqrt((tempP2[0]-pos2[0])*(tempP2[0]-pos2[0])+ (tempP2[1]-pos2[1])*(tempP2[1]-pos2[1]));
				v3 = Math.sqrt((tempP3[0]-pos3[0])*(tempP3[0]-pos3[0])+ (tempP3[1]-pos3[1])*(tempP3[1]-pos3[1]));
                ctx.clearRect(0, 0, 900, 600);
				(v1>4)?ctx.drawImage(redb, pos1[0], pos1[1]):ctx.drawImage(red, pos1[0], pos1[1]);
                (v2>4)?ctx.drawImage(greenb, pos2[0], pos2[1]):ctx.drawImage(green, pos2[0], pos2[1]);
				(v3>4)?ctx.drawImage(blueb, pos3[0], pos3[1]):ctx.drawImage(blue, pos3[0], pos3[1]);
                newPos();
            };
            
			var nextStop = [0,0];
			var vel = 1;
            function newPos(){
				if(nearlyEqual(pos1,nextStop)){
					nextStop = [600*Math.random(), 400*Math.random()];
					console.log(nextStop)
				}
				//console.log(pos1[0] + " " + pos1[1]);
				var tempP1 = [pos1[0], pos1[1]];
                pos1[0] += (nextStop[0]-pos1[0])*0.2;
                pos1[1] +=  (nextStop[1]-pos1[1])*0.2;
				v1 = Math.sqrt((tempP1[0]-pos1[0])*(tempP1[0]-pos1[0])+ (tempP1[1]-pos1[1])*(tempP1[1]-pos1[1]));
            }
			
			function nearlyEqual(p1,p2){
				return (Math.abs(p1[0]-p2[0])<1 && Math.abs(p1[1]-p2[1])<1);
			}
        }
    </script>


</body>
</html>
